<template>
  <div class="w-full h-full bg-grey">
    <van-nav-bar
      class="bg-red text-white"
      title="订单确认"
      left-arrow
      @click-left="$router.go(-1)">
    </van-nav-bar>
    <div class="m-t-10 bg-white p-t-5 p-b-15 p-h-10">
      <div class="flex j-between a-center m-t-10">
        <img class="max-w-200 w-60 h-60 b-r-4"
          src="@/assets/images/merchant.jpg" alt="商家名称">
        <div class="relative flex-1 m-l-10 text-content fs-14">
          <p>海信（Hisense）H55E75A 55英寸 4K HDR 超薄全面屏电视</p>
          <p class="text-blue fs-12 m-t-5">已下单</p>
        </div>
      </div>
    </div>
    <div class="bg-grey p-10">
      <!-- 订单详情 -->
      <div class="bg-white">
        <p class="icon-title flex j-between p-10 b-b fs-14 text-content">
            订单信息
        </p>
        <div class="text-content fs-12 p-10 b-b">
          <p class="flex j-between p-v-5">
            <span>三只松鼠大礼包</span>
            <span class="text-red fs-16">¥27.8</span>
          </p>
          <p>x 1</p>
        </div>
        <div class="text-content fs-12 p-10 b-b">
          <p class="flex j-between p-v-5">
            <span>优惠量</span>
            <span class="text-red">¥2</span>
          </p>
          <p class="flex j-between p-v-5">
            <span>门市价</span>
            <span>¥29.8</span>
          </p>
          <p class="flex j-between p-v-5">
            <span>消费方式</span>
            <span>到店</span>
          </p>
        </div>
        <div class="text-content fs-12 p-10 b-b">
          <p class="flex j-between p-v-5 text-grey">
            <span>手机号</span>
            <span>15638771882</span>
          </p>
        </div>
      </div>
    </div>
    <div class="flex j-around m-t-10">
      <van-button class="p-h-30" plain round>取消</van-button>
      <van-button to="/order/detail/123" class="p-h-30" type="danger" round>确认</van-button>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
$lightred: #FA6B4F;
.bg-lightred {
  background: $lightred;
}
.rotate-15 {
  /deep/ svg {
    transform: rotate(15deg);
  }
}
.icon-title {
  position: relative;
  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 3px;
    height: 15px;
    background: #FA6B4F;
  }
}
.van-nav-bar .van-icon {
  color: #fff!important;
}
.van-nav-bar__title {
  color: #fff!important;
}
.van-hairline--bottom::after {
  border: none;
}
</style>
